<!--
 * @Description: 左侧目录树
 * @Author: wang_k
 * @Date: 2023-05-16 14:25:27
 * @LastEditTime: 2023-07-12 14:38:11
 * @FilePath: /demo_important/src/views/Ceshi/components/archivesLeftTree.vue
-->
<template>
  <div class="archives-leftTree">
    <div class="archives-tree-header">
      <span>制度体系</span>
      <span
        class="title-add"
        @click="handleAddData"
      >新增一级节点</span>
    </div>
    <el-tree
      :data="treeData"
      ref="baseTree"
      :props="defaultProps"
      node-key="id"
      :default-expanded-keys="expandedKeys"
      @node-click="handleNodeClick"
      :expand-on-click-node="false"
      :highlight-current="true"
    >
      <div
        class="tree-span"
        slot-scope="{ node, data }"
        :title="data.label"
      >
        <span>{{ data.label }}</span>

        <el-popover
          :ref="`popoverRef${data.label}`"
          placement="bottom"
          width="150"
          trigger="click"
          @show="onPopoverShow(data.label)"
        >
          <div
            class="popover-node"
            @click="handleAddData(data)"
          >新增子节点</div>
          <div
            class="popover-node"
            @click="handleEdit(data)"
          >编辑</div>
          <div
            class="popover-node"
            @click='handleRemove(data)'
          >删除</div>
          <span
            class="operation"
            slot="reference"
          > ...</span>
        </el-popover>
      </div>
    </el-tree>
    <!-- 新增/编辑 -->
    <el-dialog
      width="50%"
      :title="titleName"
      :visible.sync="addShow"
      append-to-body
      :destroy-on-close="true"
    >
      <div class="form-content">
        <el-form
          ref="form"
          :model="editForm"
          label-width="80px"
          :rules="fileRules"
        >
          <el-form-item label="节点名称">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item
            label="文件"
            prop="fileList"
          >
            <el-upload
              class="upload-demo"
              action=""
              :limit="5"
              accept=""
              :show-file-list="true"
              :auto-upload="false"
              :file-list="editForm.fileList"
              :before-remove="() => false"
              :on-change="
                (file, fileList) => {
                  handleChange(file, fileList);
                }
              "
            >
              <el-button
                size="small"
                icon="el-icon-upload2"
                type="primary"
                plain
              >附件上传</el-button>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="服务地址">
            <el-input v-model="editForm.url"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
            >确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data() {
    return {
      treeData: [{
        label: '一级1',
        children: [{
          label: '二级1-1',
          children: [{
            label: '三级1-1-1'
          }]
        }]
      }, {
        label: '一级2',
        children: [{
          label: '二级2-1',
          children: [{
            label: '三级2-1-1'
          }]
        }, {
          label: '二级2-2',
          children: [{
            label: '三级2-2-1'
          }]
        }]
      }, {
        label: '一级3',
        children: [{
          label: '二级3-1',
          children: [{
            label: '三级3-1-1'
          }]
        }, {
          label: '二级3-2',
          children: [{
            label: '三级3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      closeId: "",
      expandedKeys: ["0"],
      titleName: "",
      editForm: {
        name: "",
        file: null,
        fileList: [],
        url: "",
        lable: "1",
        type: "1",
      },
      addShow: false,
      fileRules: {
        fileList: [
          {
            required: true,
            message: "请完善相关文件上传",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
  },
  watch: {
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleChange(file, fileList) {
      // fileList.push(file);
      this.editForm.fileList.push(file);
       this.$refs.form.validateField("fileList");
      // this.editForm.file = file;
    },
    onPopoverShow(Id) {
      console.log(this.$refs, Id, this.closeId);
      if (this.closeId) {
        console.log(this.closeId, this.$refs[`popoverRef${this.closeId}`]);
        this.$refs[`popoverRef${this.closeId}`].doClose();
      }

      // this.closeId = JSON.stringify(JSON.parse(Id))
      this.closeId = Id
    },
    /* 确定事件 */
    onSubmit() {
      console.log(this.editForm);
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (valid) {
          // alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleNodeClick() { },
    /* 新增 */
    handleAddData(data) {
      this.titleName = "新增";
      this.addShow = true;
      this.editForm.parentId = this.treeParentId;
    },
    /* 编辑 */
    handleEdit(row) {
      this.titleName = "编辑";
      this.addShow = true;
      for (const k in this.editForm) {
        this.editForm[k] = row[k];
      }
      this.editForm.id = row.id;
    },
    /* 确定事件 */
    onSubmits() {
      if (this.titleName === "新增") {
        // mapApi
        //   .addBaseMap(this.editForm)
        //   .then((res) => {
        //     this.handleReset();
        //   })
        //   .catch((error) => {
        //     this.addShow = false;
        //   });
      } else if (this.titleName === "编辑") {
        // mapApi
        //   .editBaseMap(this.editForm)
        //   .then((res) => {
        //     this.handleReset();
        //   })
        //   .catch((error) => {
        //     this.addShow = false;
        //   });
      }
    },
  },
};
</script>

<style scoped>
.archives-tree-header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title-add {
  color: #409eff;
  cursor: pointer;
}
.tree-span {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.popover-node {
  cursor: pointer;
}
</style>
